<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
		<style>
			[v-cloak]{
				display: none;
			}
		</style>
	</head>
	<body>
		<h3>姓名(单值)、年龄(单值)、爱好(数组)、女朋友(对象)、豪车(对象数组)</h3>
		<div id="app" v-cloak>
			{{name}}、{{age}}
			<hr>
			{{hobby}}、{{hobby[0]}}、{{hobby[hobby.length-1]}}
			<hr>
			{{girl.name}}、{{girl.age}}、{{girl}}<hr>
			{{cars[0].name}}、{{cars}}
		</div>
	</body>
	<script>
		new Vue({
			el: "#app",
			data: {
				name: "陈强",
				age: 18,
				hobby: ["乒乓球", "爬山", "唱歌"],
				girl: {
					name: "李梅",
					age: 16
				},
				cars: [
					{name:"劳斯莱斯",color:"白色"},
					{name:"奔驰",color:"红色"},
					{name:"宝马",color:"绿色"}
				]
			}
		})
	</script>
</html>
